<template>
	<div class="modal-container">
		<el-dialog title="提交充值截图" width="596px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" :closed="on_closed">
			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label" style="margin-right: 10px;">提交充值截图</div>
						<div class="upload-box">
							<el-upload class="upload-image" list-type="picture-card" accept="image/*"
								:multiple="upload_config_map['chargePic'].multiple"
								:limit="upload_config_map['chargePic'].limit" :name="upload_name"
								:action="mix_upload_action" :data="upload_data"
								:file-list="upload_result_map['chargePic']"
								:on-success="(res, file, fileList) => upload_on_success({ item: { field: 'chargePic' }, res, file, fileList })"
								:on-remove="(file, fileList) => upload_on_remove({ item: { field: 'chargePic' }, file, fileList })"
								:before-upload="upload_before_upload" :on-preview="upload_on_preview">
								<i class="el-icon-plus" v-if="upload_config_map['chargePic'].limit"> </i>
								<div class="el-upload__tip" slot="tip"
									v-if="upload_config_map['chargePic'].tip">
									{{ upload_config_map['chargePic'].tip || "" }}
								</div>
							</el-upload>
						</div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";

export default {
	name: "refund-audit-modal",
	components: {

	},
	data() {
		return {
			show:false,
			// 上传
			upload_name: "file",
			upload_data: {
				action: 'upload_uploadImg',
				token:localStorage.getItem("token")
			},
			upload_uploadFile: {
				action: 'upload_uploadFile'
			},
			dialogImageUrl: "",
			dialogVisible: false,
			upload_result_map: {
				'chargePic': [],
			},
			// 上传
			upload_config_map: {
				'chargePic': {
					multiple: true,
					limit: 5,
					tip: '请选择文件',
				},
			},
		};
	},
	computed: {},
	watch: {

	},
	created() { },

	methods: {
		init(row) {
			this.info = row
			this.show = true;
		},
		
		// 上传逻辑
		
		//
		upload_before_upload(file) {
			console.warn("upload_before_upload");
			const isLt50M = file.size / 1024 / 1024 < 50; //文件大小 小于 50MB
			return isLt50M;
		},
		// 上传视频
		upload_before_upload_video(file) {
			const allowedTypes = ['video/mp4', 'video/avi', 'video/mov'];
			if (!allowedTypes.includes(file.type)) {
				this.$message.error('仅支持上传 MP4、AVI 和 MOV 格式的视频文件！');
				return false;
			}
			return true;
		},
		// 上传视频
		upload_on_success(option) {
			let {
				item,
				res,
				file,
				fileList
			} = option
			this.$log("upload_on_success option", option);
			if (res.code == 200) {
				this.$message({
					message: res.msg,
					type: 'warning'
				});
				// let url = res.data.url;
				this.upload_result_map[item.field] = fileList;
			} else {
				this.$message.error(res.msg);
			}
		},
		upload_on_remove(option) {
			let {
				item,
				file,
				fileList,
			} = option;
			this.$log('upload_on_remove option', option)
			this.upload_result_map[item.field] = fileList;
		},
		upload_on_preview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		
		format_image_render(field) {
			let value = this.info[field];
			let url_list = [];
			if (typeof value == 'string') {
				url_list = value.split(',')
			} else if (typeof value == 'object') {
				url_list = value
			}
			this.upload_result_map[field] = url_list.map(v => ({
				name: v,
				url: v,
				response: {
					data: {
						name: v,
						url: v,
					}
				}
			}))
		},
		
		get_image_form_value(field) {
			let fileList = this.upload_result_map[field] || []
			let value = fileList.map(v => v.response.data.url).join('|')
			return value
		},
		
		// 上传逻辑
		
		
		on_before_close() {
			this.show = false;
		},
		on_closed() {
			this.form = {
				updateType: '',
				remark: '',
			}
		},
		do_submit() {
			
			let uploadImgs = this.get_image_form_value('chargePic')
			
			if (uploadImgs.length==0) {
				alertErr("请上传截图");
				return;
			}

			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "orders_updateOrder",
					id: this.info.id,
					updateType:3,
					chargePic:uploadImgs
				}
			}).then(res => {
				if (res.code == 200) {
					this.$emit('confirm')
					this.show = false
					this.$message({
						message: res.msg,
						type: 'success'
					})
				} else {
					alertErr(res.msg)
				}
			})
		},
		
		query_compnay() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "setting_getExpressList",
					page: 1,
					pageNum: 100,
					source: '', //来源：0-快递鸟 1-快递100
				}
			}).then(res => {
				this.company_list = res.data.list
			})
		},
		
		changeCompany(value) {
			console.log('选择快递公司', value)
			let company_info = this.company_list.find(v => v.id == value)
		
			this.form.expressNo = company_info.expressNo;
			this.form.expressName = company_info.expressName;
		},

	},
};
</script>

<style scoped lang="less">
.upload-plus {
	width: 140px;
}

/deep/ .el-upload {
	display: block;
	width: 200px;
	margin: 0 auto;
	margin: 0;

	.empty {
		.flex-center();
	}
}
/deep/.el-upload-list__item{
	width: 100px;
	height: 100px;
}

/deep/ .modal-record {
	// margin-top: 80px !important;


	.modal-inner {
		padding: 0;
	}

	.el-dialog__header {
		.flex-between();
		border-bottom: 1px solid #eee;
		background: #a98c4d;
		background: #f7f7f7;
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		font-size: 18px;
		color: #333;

		.el-dialog__title {
			color: #000;
		}

		.el-dialog__headerbtn {

			// top: 0;
			.el-dialog__close {
				color: #000;
				font-size: 20px;
				font-weight: bold;
			}
		}
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog__footer {
		text-align: center;



	}
}

.modal-ctx {
	padding: 30px 50px;
	max-height: 60vh;
	overflow-y: auto;
	border-bottom: 1px solid #ddd;

	.tip {
		margin-bottom: 20px;
		color: #444;
		font-size: 14px;
	}

	.input-box {
		margin-bottom: 15px;
		position: relative;

		&.flex {
			display: flex;
			align-items: flex-start;
			// align-items: center;

			.label {
				margin-bottom: 0;
			}
		}

		.label {
			min-width: 80px;
			// margin-right: 20px;
			margin-bottom: 20px;
			font-size: 14px;
			color: #6e7285;
		}

		.input-item {
			flex: 1;
			display: flex;
			align-items: center;


			.el-input {
				width: 220px;
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
}

.upload-ctx {
	margin: 20px 0;
}

.btn-send {}
/deep/ .upload-image .el-upload {
	width: 100px;
	height: 100px;
	line-height: 98px;
}
</style>